import React, { useState } from 'react';
import { TabBar } from 'antd-mobile';
import styles from './TabButton.module.css'
import { useNavigate, useLocation } from 'react-router-dom';

import { AddSquareOutline } from 'antd-mobile-icons'

function TabButton() {
  const navigate = useNavigate();
  const location = useLocation();

  const [activeKey, setActiveKey] = useState(location.pathname);

  const tabs = [
    {
      key: '/',
      title: '主页',
    },
    {
      key: '/shopping',
      title: '商城',
    },
    {
      key: '/video',
      icon: <AddSquareOutline />,
    },
    {
      key: '/message',
      title: '消息',
    },
    {
      key: '/my',
      title: '我',
    },
  ];

  const changeTab = (key) => {
    setActiveKey(key);
    navigate(key);
  };

  return (
    <div className={styles.bottomTab}>
      <TabBar activeKey={activeKey} onChange={changeTab}>
        {tabs.map(item => (
          <TabBar.Item
            key={item.key}
            title={<span style={{ fontSize: '14px' }}>{item.title}</span>}
            icon={item.icon}// 单独传递 icon
          />
        ))}
      </TabBar>
    </div>
  );
}

export default TabButton;
